<template>
  <p>name: {{ name }}</p>
  <p>age: {{ age }}</p>

  <button @click="updateName">update name</button>
</template>

<script>
import { reactive, toRef, toRefs } from 'vue';

export default {
  setup() {
    const data = reactive({
      name: 'ifer',
      age: 10,
      address: '河南',
      sex: '男',
    })
    // toRef 可以把响应式对象中的某个属性变为单独的响应式 ref 对象，并且转换之后的值（对象）和原来是关联的
    /* const name = toRef(data, 'name')
    const age = toRef(data, 'age')
    const address = toRef(data, 'address')
    const sex = toRef(data, 'sex') */

    // !toRefs 可以把响应式对象中的所有属性都转为响应式的 ref 对象
    /* const { name, age, address, sex } = toRefs(data)
    const updateName = () => {
      name.value = '谈啸'
    }
    return { name, age, address, sex, updateName }  */

    const updateName = () => {
      data.name = '谈啸'
    }
    return { ...toRefs(data), updateName }
  }
}
</script>